<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="body">
    <el-form ref="form" label-width="100px" :rules="rules" :model="form" status-icon>
      <el-form-item label="用户账号" prop="userAccount">
        <el-input v-model="ruleForm.userAccount" placeholder="用户账号"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" placeholder="密码" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="ruleForm.confirmPassword"
          placeholder="确认密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="ruleForm.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="民族" prop="ethnicity">
        <el-select v-model="ruleForm.ethnicity" placeholder="请选择民族">
          <el-option
            v-for="item in ethnicities"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthDate">
        <el-date-picker
          v-model="ruleForm.birthDate"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="ruleForm.email" placeholder="电子邮箱"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="ruleForm.mobile" placeholder="手机"></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-checkbox-group v-model="ruleForm.roles">
          <el-checkbox label="高校专家"></el-checkbox>
          <el-checkbox label="指导教师"></el-checkbox>
          <el-checkbox label="学生"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="职称" prop="title">
        <el-select
          v-model="ruleForm.title"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请选择职称"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
          <template #loading>
            <svg class="circular" viewBox="0 0 50 50">
              <circle class="path" cx="25" cy="25" r="20" fill="none" />
            </svg>
          </template>
        </el-select>
      </el-form-item>

      <el-form-item label="学院" prop="college">
        <el-input v-model="ruleForm.college" placeholder="学院"></el-input>
      </el-form-item>
      <el-form-item label="是否启用" prop="isEnabled">
        <el-radio-group v-model="ruleForm.isEnabled">
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="校内" prop="isOnCampus">
        <el-radio-group v-model="ruleForm.isOnCampus">
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="项目类型" prop="projectType">
        <el-select v-model="ruleForm.projectType" placeholder="请选择项目类型">
          <el-option
            v-for="type in projectTypes"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目级别" prop="projectLevel">
        <el-select v-model="ruleForm.projectLevel" placeholder="请选择项目级别">
          <el-option
            v-for="level in projectLevels"
            :key="level.value"
            :label="level.label"
            :value="level.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="resetForm">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const form = ref({
  userAccount: '123',
  userName: '',
  password: '',
  confirmPassword: '',
  gender: '',
  ethnicity: '',
  birthDate: '',
  email: '',
  phone: '',
  mobile: '',
  roles: [],
  title: '',
  college: '',
  isEnabled: '',
  isOnCampus: '',
  projectType: '',
  projectLevel: ''
})

const ethnicities = ref([
  { value: '汉族', label: '汉族' },
  { value: '蒙古族', label: '蒙古族' },
  { value: '回族', label: '回族' },
  { value: '藏族', label: '藏族' }
])

// const titles = ref([
//   { value: '教授', label: '教授' },
//   { value: '副教授', label: '副教授' }
// ])

const projectTypes = ref([
  { value: '创新训练项目', label: '创新训练项目' },
  { value: '创业训练项目', label: '创业训练项目' },
  { value: '创业实践项目', label: '创业实践项目' }
])

const projectLevels = ref([
  { value: '国家级', label: '国家级' },
  { value: '省级', label: '省级' }
])

const rules = ref({
  userAccount: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  ethnicity: [{ required: true, message: '请选择民族', trigger: 'change' }],
  birthDate: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
  email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  mobile: [{ required: true, message: '请输入手机', trigger: 'blur' }],
  title: [{ required: true, message: '请选择职称', trigger: 'change' }],
  college: [{ required: true, message: '请输入学院', trigger: 'blur' }],
  isEnabled: [{ required: true, message: '请选择是否启用', trigger: 'change' }],
  isOnCampus: [{ required: true, message: '请选择校内', trigger: 'change' }],
  projectType: [{ required: true, message: '请选择项目类型', trigger: 'change' }],
  projectLevel: [{ required: true, message: '请选择项目级别', trigger: 'change' }]
})

const onSubmit = () => {
  const formRef = document.querySelector('.body .el-form') // 获取表单的引用
  formRef.validate((valid) => {
    if (valid) {
      console.log(form.value) // 可以处理提交事件
    } else {
      console.error('表单验证失败!')
      return false
    }
  })
}

const resetForm = () => {
  const formRef = document.querySelector('.body .el-form') // 获取表单的引用
  formRef.resetFields()
}
</script>

<style lang="less" scoped>
.body {
  width: 1350px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 40px;
  padding: 40px 300px;
  // line-height: 100px;
}
</style>
